<template>
  <div class="admin-tutorial-show">
    <div class="show-filex" :style="`width: ${doceWidth}px;`">
      <div class="show-filex_line"></div>
      <div class="tutorial-index_head">
        <div class="index_head-conter">
          <div class="inconter_head-box">
            <div class="inconter_head">
              <div class="index_head-ipt">
                <el-autocomplete popper-class="my-autocomplete" v-model="value" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect">
                  <template slot-scope="{ item }">
                    <div class="name">{{ item.title }}</div>
                  </template>
                </el-autocomplete>
              </div>
              <div class="index_head-icon">
                <i class="el-icon-search"></i>
              </div>
            </div>
            <div class="head-add_buts" @click="$router.push('/admin/tutorial/add')">添加</div>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 110px;"></div>
    <div class="show-box">
      <showLeft :doceHeight="documentHeight"></showLeft>
      <showRight :widget="viewModel" v-if="viewModel"></showRight>
    </div>
  </div>
</template>
<script>
  import ala from 'ala'
  import showRight from './widget/show-right.vue'
  import showLeft from './widget/show-left.vue'
  export default {
    components: {
      showRight,
      showLeft
    },
    data () {
      return {
        viewModel: null,
        documentHeight: 0,
        value: '',
        doceWidth: 0
      }
    },
    mounted () {
      this.init()
      var that = this
      window.onresize = () => {
        return (() => {
          that.onresize()
        })()
      }
    },
    methods: {
      async init () {
        this.onresize()
        var para = {
          id: this.$route.query.id
        }
        var repones = await ala.diyHttpGet('Api/Tutorial/QueryList', para)
        this.viewModel = repones
        var relaArray = []
        for (var i = 0; i < this.viewModel[0].relaitons.length; i++) {
          if (this.viewModel[0].relaitons[i] !== '') {
            relaArray.push(this.viewModel[0].relaitons[i])
          }
        }
        this.viewModel[0].relaitons = relaArray
      },
      onresize () {
        var h = document.documentElement.clientHeight || document.body.clientHeight
        this.documentHeight = h - 172
        var showDocum = document.getElementsByClassName('show-box')
        this.doceWidth = showDocum[0].clientWidth
      },
      async querySearch (queryString, cb) {
        var res = await ala.diyHttpGet('Api/Tutorial/QueryList')
        var restaurants = res
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      createFilter (queryString) {
        return (restaurant) => {
          return (restaurant.title.toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
        }
      },
      handleSelect (item) {
        this.value = item.title
        this.$router.push('/admin/tutorial/show?id=' + item.id)
      }
    }
  }
</script>
<style lang="scss">
  @import "./var.scss";
</style>